#@layout()

#define main()
<div class="form-signin">
    <form class="login-form">
        <img class="mb-4" src="#(ctx)/img/bootstrap-solid.svg" alt="" width="72" height="72" />
        <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
        <div class="form-group">
            <input type="text" name="account" class="form-control" placeholder="登录账号" required autofocus />
        </div>
        <div class="form-group">
            <input type="password" name="password" class="form-control" placeholder="登录密码" required />
        </div>
        <div class="input-group mb-4">
            <input type="text" name="vercode" class="form-control" placeholder="验证码" required />
            <div class="input-group-append">
                <img class="vercode" src="#(ctx)/captcha?t=#nowTime()" alt="" />
            </div>
        </div>

        <button class="btn btn-lg btn-primary btn-block" type="submit">登 入</button>
    </form>
</div>
#end

#define script()
<script type="text/javascript">
    $(document).ready(function() {
        const getCaptcha = function() {
            $(".vercode").attr('src', '#(ctx)/captcha?t=' + (new Date().getTime()));
        };

        $("form").on("click", ".vercode", function(event) {
            event.preventDefault();
            getCaptcha();
        }).submit(function(event) {
            event.preventDefault();
            utils.showToast("正在登录", "loading-icon", false);

            const data = utils.formValue($(this));
            
            utils.ajaxPost({
                url: "#(ctx)/login",
                data: JSON.stringify(data),
                done: function(data) {
                    sessionStorage.setItem("userInfo", JSON.stringify(data));
                    utils.hideToast(1000, function() {
                        window.location.href = '#(ctx)/main?token=' + data.token;
                    });
                }, fail: function(err) {
                    utils.showToast(err, "", true, function() {
                        getCaptcha()
                    });
                }
            });
        });
    });
</script>
#end
